<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>生命周期</h2>
      <p>hello</p>
      <p>world</p>
      <p class="num">{{a}}</p>
      <button @click="a++">btn</button>
      <ul>
        <li v-for="(item, index) in list" :key="index">
          {{item.province}}{{item.year}}的gdp是{{item.value}}
        </li>
      </ul>
    </div>

    <script src="./lib/vue3.js"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            a: 3,
            list: [],
          };
        },
        methods: {
          fn() {},
        },

        // 相当于innerHtml
        // template: "<div>123333</div>",

        // 创建阶段
        beforeCreate() {
          // 在beforeCreate里面是不能拿到data，methods等选项里面的内容的
          console.log("beforeCreate", this.a, this.fn);
        },
        // 在这里vue会去初始化选项api
        created() {
          console.log("created", this.a, this.fn);
        },

        // 在这里vue会去检查是否有template选项

        // 挂载阶段
        beforeMount() {
          // 在beforeMount的时候，dom节点没有被插入
          // 在这里不能做任何和dom相关的处理
          console.log("beforeMount", document.querySelector("#app").innerHTML);
        },
        // 在这里vue会去初始化创建渲染和插入dom节点
        mounted() {
          console.log("mounted", document.querySelector("#app").innerHTML);
          // fetch是h5新增的请求方式，是浏览器自带，会自动返回promise对象的
          // fetch("http://www.pudge.wang:3080/api/gdp2")
          //   .then((response) => response.json())
          //   .then((res) => {
          //     console.log(res);
          //     this.list = res.data;
          //   });
        },

        // 数据请求是可以在created，beforeMount，mounted都是可以做的
        // 建议放mounted

        // 更新阶段
        // 更新阶段的生命周期是当页面的数据发生改变的时候触发
        beforeUpdate() {
          console.log(
            "beforeUpdate",
            this.a,
            document.querySelector(".num").innerHTML
          );
          // this.a++;
        },
        // 是页面重新渲染的前后,beforeUpdate还是updated都是在数据改变之后
        // 在updated是不能改变数据，会造成死循环
        updated() {
          console.log(
            "updated",
            this.a,
            document.querySelector(".num").innerHTML
          );
          // this.a++;
        },

        // 卸载阶段
        beforeUnmount() {
          console.log("beforeUnmount");
        },
        unmounted() {
          console.log("unmounted");
        },
      }).mount("#app");
    </script>
  </body>
</html>
